<template>
    <div>
        <el-dialog
            center
            custom-class="operate-login-div"
            width="70%"
            :visible.sync="DialogLogin"
            :close-on-press-escape="false"
            :close-on-click-modal="false"
            :show-close="false"
            :destroy-on-close="true"
        >
            <div class="max-w-screen-xl m-0  bg-white shadow sm:rounded-lg flex justify-center flex-1" style="border-top-right-radius: 8px;border-bottom-right-radius: 8px">
                <div class="lg:w-1/2 xl:w-5/12 p-6 sm:p-12">
                    <div class="flex flex-col items-center" @click="$parent.playSound('click_one');">
                        <h1 class="text-2xl xl:text-3xl font-extrabold">用户登录</h1>
                        <div class="w-full flex-1 mt-8">
                            

                            <div class="mx-auto max-w-xs">
                                <input v-model="params.email"
                                    class="w-full px-8 py-4 rounded-lg font-medium bg-gray-100 border border-gray-200 placeholder-gray-500 text-sm focus:outline-none focus:border-gray-400 focus:bg-white"
                                    type="email"
                                    placeholder="电子邮箱"
                                />
                                <input v-model="params.password"
                                    class="w-full px-8 py-4 rounded-lg font-medium bg-gray-100 border border-gray-200 placeholder-gray-500 text-sm focus:outline-none focus:border-gray-400 focus:bg-white mt-5"
                                    type="password"
                                    placeholder="密码"
                                />
                                <div style="width: 100%; text-align: right; margin-top: 10px;">
                                    <el-link type="primary" @click="$emit('close', 'dialogLogin', false, 'register')">立即注册？</el-link>
                                </div>
                                <button v-loading="loading" @click="submit"
                                    class="mt-5 tracking-wide font-semibold bg-indigo-500 text-gray-100 w-full py-4 rounded-lg hover:bg-indigo-700 ease-in-out flex items-center justify-center focus:shadow-outline focus:outline-none"
                                >
                                    <span class="ml-3">立即登录</span>
                                </button>
                            </div>

                            <div class="my-12 border-b text-center">
                                <div
                                    class="leading-none px-2 inline-block text-sm text-gray-600 tracking-wide font-medium bg-white transform translate-y-1/2"
                                >
                                    或者使用第三方软件进行登录
                                </div>
                            </div>
                            <el-tooltip class="item" effect="dark" content="待开发" placement="top">
                                <div class="flex flex-col items-center">
                                    <button
                                        class="w-full max-w-xs font-bold shadow-sm rounded-lg py-3 bg-indigo-100 text-gray-800 flex items-center justify-center ease-in-out focus:outline-none hover:shadow focus:shadow-sm focus:shadow-outline"
                                    >
                                        <div class="weibo"></div>
                                        <span class="ml-4">使用QQ登录</span>
                                    </button>
                                    <button
                                        class="w-full max-w-xs font-bold shadow-sm rounded-lg py-3 bg-indigo-100 text-gray-800 flex items-center justify-center ease-in-out focus:outline-none hover:shadow focus:shadow-sm focus:shadow-outline mt-5"
                                    >
                                        <div class="weixin"></div>
                                        <span class="ml-4">使用微信登录</span>
                                    </button>
                                </div>
                            </el-tooltip>
                        </div>
                    </div>
                </div>
                <div class="flex-1 text-center hidden lg:flex" style="background-color: transparent !important;">
                    <div class="w-full bg-contain bg-center bg-no-repeat login-card-backimg">
                        <img src="@/assets/images/button/62.png" @click="$emit('close', 'dialogLogin', false)" width="46" height="46" style="float: right;" alt="">
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'login',
    props: {
        DialogLogin: {
            required: true, //是否是必要传值  可不要时为 false
            type: Boolean, //定义类型 类型  ：字符串类型、
            default: false //没有传值的话 默认值 一般与 required:false 一起用
        }
    },
    data() {
        return {
            loading: false,

            params: {
                email: '',
                password: '',
            },
        };
    },
    watch: {
        DialogLogin: {
            handler(newValue, oldValue) {
                console.log('DialogLogin newValue, oldValue :', newValue, oldValue);
            },
            deep: true
        }
    },
    methods: {
        submit() {
            let regexp = new RegExp(/^[a-zA-Z0-9]{6,18}$/);
            if (!regexp.test(this.params.password)) {
                this.$notify.info({ title: 'Notice', message: "密码格式错误（6-18位字符，请不要输入特殊字符）" });
                return false;
            }
            // 播放音频
            this.$parent.playSound('click_one');
            // 加载
            this.loading = true;
            this.$post('/api/player/login.html', this.params).then(res => {
            	if (res.code == 200) {
                    this.$notify.success({ title: 'Notice', message: "登陆成功，请稍后～" });
                    this.$localSet('bakal_player_info', res.data.users_info);
                    this.$localSet('bakal_player_token', res.data.token);

                    this.$store.commit('changeUsersInfo', res.data.users_info);
                    this.$store.commit('changeUsersToken', res.data.token);
                    this.$store.commit('changeStatus', true);

                    let _this = this;
                    setTimeout(function() {
                        _this.$emit('close', 'dialogLogin', false, 'login');
                        _this.loading = false;
                    }, 1500);
            	} else {
                    this.$notify.info({ title: 'Notice', message: res.msg });
                    this.loading = false;
                }
            }).catch(err => {
                console.log(err)
                this.loading = false;
            });
        },
    }
};
</script>
<style src="@/assets/css/tailwind.min.css" scoped></style>

<style scoped>
.weixin,
.weibo {
    display: inline-block;
    width: 32px;
    height: 32px;
    background-size: cover;
}

.weixin {
    background-image: url('../../../../assets/images/other/wx.png');
}

.weibo {
    background-image: url('../../../../assets/images/other/qq.png');
}
.bg-indigo-100 {
    background-color: #ebf4ff;
}
.border-gray-200 {
    border-color: #edf2f7;
}
.bg-gray-100 {
    background-color: #f7fafc;
}
.bg-indigo-500 {
    background-color: #667eea;
}
</style>



